<script setup>
const props = defineProps({
    /** 条件区域元素排列方式 */
    conditionsAlign: {
        type: String,
        default: 'center',
        validator: (value) => ['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly'].includes(value)
    },
    bordered: {
        type: Boolean,
        default: false
    },
    showHeader: {
        type: Boolean,
        default: true
    },
    titleIcon: String,
    titleText: String
})
</script>

<template>
    <div class="h-full">
        <n-card :bordered="bordered" class="jb-card h-full rounded-8px shadow-sm" :class="{noheader:!showHeader}">
            <template #header>
                <div class="flex items-center w-full overflow-hidden">
                    <div class="title_wrapper shrink-0">
                        <slot name="title">
                            <jb-icon :local="true"
                                v-if="props.titleIcon"
                                class="inline text-20px"
                                style="vertical-align: -3px"
                                :icon="props.titleIcon"
                            ></jb-icon>
                            <span v-if="props.titleText" class="ml-10px">
                                {{ props.titleText }}
                            </span>
                        </slot>
                    </div>
                    <div class="flex-1">
                        <n-space
                            align="center"
                            :justify="props.conditionsAlign"
                            class="conditions_wrapper ml-16px"
                            item-style="display: flex; align-item: center;"
                        >
                            <slot name="conditions"></slot>
                        </n-space>
                    </div>
                    <div class="opt_wrapper shrink-0 ml-24px">
                        <slot name="opt"></slot>
                    </div>
                </div>
            </template>
            <slot></slot>
            <template #footer>
                <slot name="footer"></slot>
            </template>
        </n-card>
    </div>
</template>

<style scoped lang="scss">
.jb-card {
  border-radius: 8px;
    :deep(.n-card-header) {
        flex-shrink: 0;
    }
    :deep(.n-card__footer) {
        flex-shrink: 0;
    }
    :deep(.n-card__content) {
        overflow: auto;
        display: flex;
        flex: 1;
        flex-direction: column;
    }
    :deep(.n-card-header__extra) {
        flex: 1;
    }
}
.jb-card.noheader{
    :deep(.n-card-header) {
        display: none;
    }
}
</style>
